<template>
  <my-pop :value="value" @input="valueChanged">
    <view
      style="
        width: 100%;
        height: 900rpx;
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
      "
    >
      <!--关闭按钮-->
      <view
        style="display: flex; justify-content: flex-end"
        @click="valueChanged(false)"
      >
        <image
          :src="indexTabBarUrl.close"
          style="
            width: 22rpx;
            height: 22rpx;
            margin-right: 32rpx;
            margin-top: 14rpx;
          "
        />
      </view>
      <!--地理位置框-->
      <view
        style="
          width: 686rpx;
          height: 80rpx;
          background-color: #f4f4f1;
          border-radius: 10rpx;
          margin-left: 28rpx;
          margin-top: 28rpx;
          display: flex;
        "
      >
        <view
          style="
            margin-left: 22rpx;
            margin-top: 22rpx;
            font-size: 28rpx;
            line-height: 40rpx;
            color: #999;
          "
          >当前定位</view
        >
        <view
          style="
            margin-left: 20rpx;
            margin-top: 20rpx;
            font-size: 32rpx;
            line-height: 44rpx;
            color: #333;
            flex: 1;
          "
          >{{ city.name }}</view
        >
        <view
          style="
            width: 132rpx;
            height: 60rpx;
            margin-left: 12rpx;
            margin-right: 12rpx;
            background-color: #fbd93a;
            border-radius: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            line-height: 40rpx;
            color: #333;
            margin-top: 10rpx;
          "
          @click="getLocation"
        >
          重新定位
        </view>
      </view>
      <!--请选择-->
      <view
        style="
          font-size: 32rpx;
          line-height: 44rpx;
          color: #333;
          margin-left: 32rpx;
          margin-top: 30rpx;
        "
        >请选择</view
      >
      <!--绿方块-->
      <view
        style="
          width: 40rpx;
          height: 4rpx;
          margin-left: 56rpx;
          margin-top: 16rpx;
          background-color: #a6e77e;
        "
      ></view>
      <!--灰线-->
      <view
        style="
          border-top: 1px solid #ddd;
          margin-left: 32rpx;
          margin-right: 32rpx;
        "
      ></view>
      <!--城市选项-->
      <view style="flex: 1; min-height: 0">
        <scroll-view
          :scroll-y="true"
          enhanced
          :show-scrollbar="false"
          style="height: 100%"
        >
          <view
            style="
              display: grid;
              grid-template-columns: repeat(4, 160rpx);
              width: 686rpx;
              grid-template-rows: 80rpx;
              grid-auto-rows: 80rpx;
              column-gap: 16rpx;
              row-gap: 16rpx;
              margin-left: 32rpx;
              margin-right: 32rpx;
              justify-items: center;
              align-items: center;
              margin-top: 32rpx;
            "
          >
            <view
              v-for="item of cityList"
              class="city-item"
              @click="cityClick(item)"
              :class="{ selected: item.name === city.name }"
              >{{ item.name }}</view
            >
          </view>
        </scroll-view>
      </view>
    </view>
  </my-pop>
</template>
<script>
import MyPop from "@/components/my-pop/index.vue";
import indexTabBarUrl from "@/url/index_tabBar";
import { reverseGeocoder } from "@/utils/geo";
import { mapState, mapMutations } from "vuex";

export default {
  name: "geo-select",
  components: { MyPop },
  computed: {
    ...mapState(["city"]),
  },
  data() {
    return {
      indexTabBarUrl,
      /**
       * 地理城市列表数据
       */
      cityList: [
        {
          name: "沈阳市",
        },
        {
          name: "长春市",
        },
        {
          name: "哈尔滨市",
        },
        {
          name: "南京市",
        },
        {
          name: "北京市",
        },
        {
          name: "泰安市",
        },
        {
          name: "天津市",
        },
        {
          name: "锦州市",
        },
      ],
    };
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    ...mapMutations(["setCity"]),
    /**
     * 获取所在城市
     */
    async getLocation() {
      try {
        let location = await wx.getLocation();
        console.log("地理信息", location);
        let result = await reverseGeocoder({ coord_type: 1, location });
        console.log("城市信息", result);
        this.setCity({ name: result.result.address_component.city });
      } catch (error) {
        console.log("获取地理失败", error);
      }
    },
    /**
     * 地理城市被选择
     * @param city
     */
    cityClick(city) {
      console.log(this.$store);
      // this.setCity(city);
      this.$store.commit("setCity", city);
      console.log("城市选择", city);
    },
    valueChanged(value) {
      this.$emit("input", value);
    },
  },
};
</script>
<style lang="scss" scoped>
.city-item {
  width: 100%;
  height: 100%;
  background-color: #f3f3f1;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #666;
  &.selected {
    background-color: #fbd93a;
  }
}
</style>
